<template>
  <div class="d-flex align-items-stretch h-250px">
    <span
      class="h2 d-flex flex-column justify-content-center align-items-center"
      style="writing-mode: vertical-rl; text-orientation: mixed; min-width: 48px"
    >
      {{ props.selectedProject.name }} 作者贡献
    </span>
    <div class="flex-grow-1">
      <table class="table-striped table">
        <thead>
          <tr>
            <th>工程师</th>
            <th>本月提交</th>
            <th>本月代码</th>
            <th>总提交</th>
            <th>总代码</th>
            <th>最早提交</th>
            <th>最近提交</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="author in authors" :key="author.name">
            <td style="line-height: 16px">
              <span class="fw-bold fs-5">{{ author.name }}</span>
              <KTIcon
                :icon-name="roleSettings[author.role].icon"
                :icon-class="`fs-5 text-${roleSettings[author.role].color} ms-2`"
              />
              <span :class="`badge badge-light-${roleSettings[author.role].color} ms-1`">
                {{ roleSettings[author.role].name }}
              </span>
              <br />
              <span class="fs-8 text-gray-500">
                {{ author.department ? author.department.substring(10) : '' }}
              </span>
            </td>
            <td>{{ author.commitCount }}</td>
            <td>{{ author.totalChanges }}</td>
            <td>{{ author.allCommitCount }}</td>
            <td>{{ author.allTotalChanges }}</td>
            <td>{{ author.minDate }}</td>
            <td>{{ author.maxDate }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import { projectService } from '@/services/business/project.service';
import type { AuthorStats } from '@/types/business/project';
import { roleSettings } from '@/utils/roleUtils';
import KTIcon from '@/core/helpers/kt-icon/KTIcon.vue';

const props = defineProps({
  selectedProject: {
    type: Object,
    required: true,
  },
});

const authors = ref<AuthorStats[]>([]);

watch(
  () => props.selectedProject,
  async (newProject) => {
    if (newProject) {
      try {
        const data = await projectService.getProjectAuthorStats(newProject.id);
        authors.value = data;
      } catch (error) {
        console.error('Error fetching project authors stats:', error);
      }
    }
  },
  { immediate: true },
);
</script>
